<template>
    <div>
        <!-- 角色管理页 -->
        <el-card class="el-main-card">
            <el-row :gutter="25">
                <el-col :span="10">
                    <!-- 搜索添加 -->
                    <el-input placeholder="请输入搜索内容" v-model="queryInfo.queryString" clearable @clear="findPage">
                        <el-button slot="append" icon="el-icon-search" @click="findPage"/>
                    </el-input>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="addShow" >添加角色</el-button>
                </el-col>
            </el-row>
            <!-- 用户列表 -->
            <el-table :data="tableList" border stripe>
                <el-table-column type="index" label="序号"/>
                <el-table-column label="角色名称" prop="label"/>
                <el-table-column label="角色标识" prop="code"/>

                    <el-table-column label="状态禁用"  prop="status">
                        <template slot-scope="scope">
                            <el-switch
                                    @change="updateStatus(scope.row)"
                                    v-model="scope.row.status"/>

                        </template>
                    </el-table-column>
<!--                    <template slot-scope="scope">-->
<!--                        <div slot="reference" class="name-wrapper">-->
<!--                            <el-tag-->
<!--                                    class="premission-btn"-->
<!--                                    :key="item.id"-->
<!--                                    v-for="item in scope.row.premissions"-->
<!--                                    size="medium">{{ item.name }}-->
<!--                            </el-tag>-->
<!--                        </div>-->
<!--                    </template>-->

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 修改 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialog(scope.row)"/>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteById(scope.row.id)"/>
                    </template>
                </el-table-column>

            </el-table>

            <!-- 分页 -->
            <el-pagination
                    @size-change="handlePageSize"
                    @current-change="handlePageNumber"
                    :current-page="queryInfo.pageNumber"
                    :page-sizes="[7, 15, 25, 30]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">

            </el-pagination>

        </el-card>

        <!-- 对话框 -->
        <el-dialog :title="title" v-loading="loading" :visible.sync="open" width="50%" @colse="dialogClosed">
            <el-form :model="dataForm" :rules="rulesDataForm" ref="dataForm" label-width="100px">
               <el-row>
                <!-- 名称 -->
               <el-col :span="11">
                <el-form-item label="角色名称" prop="label">
                    <el-input v-model="dataForm.label"/>
                </el-form-item>
               </el-col>
                   <el-col :span="11">
                <el-form-item label="角色标识" prop="code">
                    <el-input v-model="dataForm.code" @keyup.native="dataForm.code=dataForm.code.replace(/[^a-zA-Z_]/g,'')">
                    </el-input>
                </el-form-item>
                   </el-col>

                   <el-col :span="23">

                       <el-card>
                           <div slot="header" class="clearfix">
                               <span>菜单列表</span>
                           </div>
                           <el-tree ref="tree"
                                    show-checkbox :data="menuList" node-key="id" :props="{
                               label:'title',children:'children'
                           }"></el-tree>
                       </el-card>
                   </el-col>

                   <el-col :span="23" style="margin-top: 5px">

                       <el-card style="text-align: center">
                           <div slot="header" class="clearfix">
                               <span>权限列表</span>
                           </div>

                           <el-checkbox-group v-model="checkPermissions"  :prop="permissions" >
                               <el-checkbox
                                       v-for="(item,index) in permissions"
                                       :checked="item.status"
                                       :key="index"
                                       :label="item.label"
                              :disabled="!item.status"></el-checkbox>
                           </el-checkbox-group>
                       </el-card>
                   </el-col>

                   <el-col :span="11" style="margin-top: 10px">

                       <el-form-item label="权限集合" prop="permissions">
                           <el-input v-model="dataForm.permissions" @keyup.native="dataForm.code=dataForm.code.replace(/[^a-zA-Z_]/g,'')">
                           </el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span="10">
                <el-form-item label="是否使用" prop="status" >
                    <el-radio-group v-model="dataForm.status">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                    </el-radio-group>

                </el-form-item>
                   </el-col>
               </el-row>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clickCancel">取 消</el-button>
                <el-button type="primary" @click="clickOk">确 定</el-button>
            </span>
        </el-dialog>



    </div>

</template>

<script>
    export default {
        name: "role",
        data() {
            return {
                queryInfo: {
                    queryString: '',
                    pageNumber: 1,
                    pageSize: 5
                },
                //选项卡
                activeName: 'first',
                //表格数据
                tableList: [],
                //总记录数
                total: 1,
                //对话框状态
                open: false,
                //对话框标题
                title: '',
                //表单
                dataForm: {status:true},
                //权限列表
                rulesDataForm:{
                    label: [
                        { required: true, message: "请输入角色名称", trigger: "blur" },
                    ],
                    code: [
                        { required: true, message: "请输入角色标识，权限标识由字母+下划线组成", trigger: "blur" },
                    ],
                    status: [
                        { required: true, message: "请选择是否启用", trigger: "blur" },
                    ]

                },
                loading:false,
                //菜单列表
                menuList:[],
            //
                isIndeterminate:true,
                checkAll:false,
                permissions:[],
            //    权限列表
                checkPermissions:[]

            }
        },
        created() {
            this.findPage();
            this.findMenus();
            this.findPermissions();
        },
        methods:{
            findPage(){
                this.$http.post("/system/role/findPage",this.queryInfo).then(res=>{
                    console.log('角色信息',res);

                    this.tableList=res.data.data
                    this.total=res.data.total

                })
            },
            //页码变化查询
            handlePageNumber(newPageNumber) {
                this.queryInfo.pageNumber = newPageNumber;
                this.findPage();
            },
            //页数变化查询
            handlePageSize(newPageSize) {
                this.queryInfo.pageSize = newPageSize;
                this.findPage();
            },
            //添加对话框
            addShow() {
                this.title = '添加权限';
                this.dataForm = {};
                this.open = true;
            },
            //打开编辑对话框
            editDialog(row) {
                this.title = '编辑权限';
                this.dataForm = row;
                this.open = true;
            },
            //对话框关闭
            dialogClosed() {
                this.checkPermissions=[],
                this.$refs.tree.setCheckedKey([])
                //重置表单
                this.$refs.dataForm.resetFields();
            },
            //点击取消
            clickCancel() {
                //将整个表单进行充值
                this.checkPermissions=[],
                    this.$refs.tree.setCheckedKey([])
                this.dataForm = {};
                this.open = false;
            },
            //点击确定
            clickOk() {
                //表单校验
                this.$refs.dataForm.validate((valid) => {
                    if (!valid) return this.$message.error('表单校验不通过，请认真填写后提交！');
                    this.loading = true;
                    console.log('dataForm.id=',this.dataForm.id)
                    //判断是修改还是添加
                    if (this.dataForm.id === null || this.dataForm.id === undefined) {
                        //添加
                        this.$http.post('/system/role/insert', this.dataForm).then(res=> {
                           console.log(res)
                            if (!res.data.flag) {
                                setTimeout(() => {
                                    this.loading = false;
                                }, 6000);
                                return this.$message.error(res.data.message);
                            }
                            this.open = false;
                            this.loading = false;
                            this.$message.success(res.data.message);
                            this.findPage();
                        });
                    } else {
                        //修改
                        this.$http.put('/system/role/update', this.dataForm).then((res) => {
                            if (!res.data.flag) {
                                setTimeout(() => {
                                    this.loading = false;
                                }, 6000);
                                return this.$message.error(res.data.message);
                            }
                            this.open = false;
                            this.loading = false;
                            this.$message.success(res.data.message);
                            this.findPage();
                        });
                    }
                });
            },
            //删除权限
            deleteById(id) {
                this.$confirm('此操作将永久删除该权限信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //delete请求遵循restful风格
                    this.$http.delete(`/system/role/delete/${id}`).then((res) => {
                        if (!res.data.flag) return this.$message.error(res.data.message);
                        this.$message.success(res.data.message);
                        this.queryInfo.pageNumber=1
                        this.findPage();
                    });
                }).catch(() => {
                    // 成功删除为confirm 取消为 cancel
                    return this.$message.info("操作已取消");
                });
            },
            //改变权限信息的状态
            updateStatus(row){
                this.$http.put('/system/role/update',row).then(res=>{
                    console.log(res)
                    this.$message.success('状态更新成功')

                });
            },
        //    查询所有菜单信息
            findMenus(){
                this.$http.get("/system/menu/findParent").then(res=>{

                    this.menuList=res.data.data
                    console.log('菜单信息',this.menuList)
                    this.menuList.filter(item=>{
                        item.disabled=!item.status;
                        if(item.children && item.children.length>0){
                            item.children.filter(i=>{
                                i.disabled=!i.status;
                            })
                        }
                    })
                })
            },
            handleCheckPermission(val){
                this.checkPermissions=val ? this.permissions : []
                this.isIndeterminate=false
            },
           findPermissions(){
                this.$http.get("/system/permission/findAll").then(res=>{
                    this.permissions=res.data.data
                    console.log('权限信息',this.permissions)
                })
           }
        }
    }

</script>

<style scoped>
    .el-col{
        margin-right: 20px;
    }
</style>
